import React, {Component} from "react";
import {connect} from "dva";
import time, {currentTime, dateFormat, getMockTime} from "@/utils/time";
import echarts from "echarts";
import {addResizeHook} from "@/utils/resize";
import {PageHeaderWrapper} from "@ant-design/pro-layout";
import {DatePicker, Table} from "antd";
import moment from "moment";
import {trigger} from "@/utils/utils";
const {RangePicker} = DatePicker;

class JunYunStatus extends Component {

  colors = ['#5793f3', '#d14a61', '#675bba']

  state = {
    start: time.getStartOfDay(),
    end: time.getEndOfDay(),
  };


  async componentDidMount() {
    const payload = await getMockTime("LuGangQinShiData")
    const {start,end} = payload

    const {dispatch} = this.props;

    dispatch({
      type: 'lugang/getAvgStatus',
      payload: {
        start: dateFormat(start),
        end: dateFormat(start),
      }
    });

    this.setState({start,end})
  }



  timePick = value => {
    this.state.selectedTime = value.toDate();

    this.props.dispatch({
      type: 'lugang/getTemp',
      payload:{"time":dateFormat(this.state.selectedTime)}
    });
  };


  componentWillUnmount() {
    // cancelAnimationFrame(this.reqRef);
    // this.stopLoop = true
  }

  render() {
    const columns = [
      {title: '区域', dataIndex: 'area', key: 'area'},
      {title: '周向均匀性', dataIndex: 'zhou', key: 'zhou'},
      {title: '高度', dataIndex: 'height', key: 'height'},
      {title: '径向均匀性', dataIndex: 'jing', key: 'jing'},
    ];

    const {avgStatus} = this.props;

    const {start,end} = this.state;

    return (
      <div>

        <RangePicker
          key={Math.random()}
          format="YYYY-MM-DD HH"
          placeholder={['开始时间', '结束时间']}
          onChange={this.timePick}
          defaultValue={[moment(start, "YYYY-MM-DD HH"), moment(end, "YYYY-MM-DD HH")]}
        />

        <Table
          size="small"
          columns={columns}
          dataSource={avgStatus.data}
          pagination={false}
        />
      </div>

    )
  }
}

export default connect(({lugang, global}) => ({
  avgStatus: lugang.avgStatus,
  global
}))
(JunYunStatus);
